<template>
  <div class="checks">
    <head-top v-if="status===1" head-title="监理查验" go-back="true" hidden='true' check="立即发布"
              @toCheck="$router.push('/CheckPublish')"></head-top>
    <head-top v-else head-title="监理查验" go-back="true"></head-top>
    <p v-if="!noList" style="padding:200px 10px 0px 10px; text-align: center; font-size:16px">您不是该小区业主或员工，查看不了</p>
    <div class="classify">
      <!--分类选择-->
      <div class="class_type">
        <p>选择种类</p>
        <div class="class_list" @click="clickClassify">
          <span>{{classifyName}}</span>
          <img src="./images/select-type@2x.png" alt="">
        </div>
      </div>
      <!--时间选择-->
      <div class="time_type">
        <p>时间筛选</p>
        <div class="time_list">
          <select class="selectBox" v-model="monthValue" @change="_getsortType">
            <option v-for="(item,index) in monthType" :value="item.value" :key="index">
              {{item.label}}
            </option>
          </select>
          <img src="./images/select-type@2x.png" alt="">
        </div>
      </div>
    </div>
    <div class="check_box " v-if="noList"
         v-show="monthValue === 'month' || monthValue === 'lastQuarter' || monthValue === 'halfYear' || monthValue === 'OneYear'">
      <!--分类部分-->
      <div class="type-wrapper" v-show="classifyShow2" ref="typeWrapper">
        <mt-navbar v-model="selected">
          <!--父组件想在子组件上监听自己的click，则需要加上native(在封装好的组件上click都需要加上native)-->
          <mt-tab-item @click.native.prevent="classBtn(item.name)" :id="index" v-for="(item, index) in checkData"
                       :key="index">
            {{item.name}}
          </mt-tab-item>
        </mt-navbar>
      </div>
      <!--内容展示部分-->
      <div class="check-wrapper" ref="checkWrapper">
        <mt-tab-container v-model="selected">
          <mt-tab-container-item :id="index" v-for="(item, index) in checkData" :key="index">
            <ul class="list">
              <li v-for="(list,index) in item.data" :key="index" v-show="list.state===1"
                  class="check-item border-bottom-1px"
                  @click="$router.push('/CheckDetail/'+list.id)">
                <div class="image">
                  <span v-show="list.img[0]" v-lazy:background-image="list.img[0]"></span>
                  <img src="../../assets/imgDefault.png" alt="" v-show="!list.img[0]">
                </div>
                <div class="content">
                  <h2 class="titleh2" v-if="list.project_name!==null">{{list.project_name}}</h2>
                  <h2 class="titleh2" v-else>暂无标题</h2>
                  <div class="number_box" v-show="list.lift_num && list.lift_num != '0'">
                    <!-- <span class="text_title" v-show="list.lift_num==='0'"></span> -->
                    <span class="text">电梯编号:{{list.lift_num}}</span>
                  </div>
                  <div class="time">
                    时间：{{list.created_at*1000 | dateFmt('YYYY-MM-DD')}}
                  </div>
                </div>
              </li>
              <li v-show="item.st===0" class="no-data">
                <img src="../../assets/default.png" alt="" width="100" height="100">
                <p>抱歉！ 暂无数据</p>
              </li>
            </ul>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
    </div>
    <!--暂屏蔽底部菜单-->
    <!--<v-footer></v-footer>-->
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import Footer from '../footer/Footer.vue'
  import {Indicator} from 'mint-ui'
  import {getsortType} from '../../api/supervise.js'

  export default {
    name: 'Check',
    data() {
      return {
        classifyShow2: false, // 种类选择列表的显示判断
        classifyName: '小区电梯', // 种类分类的每个name值
        checkData: [],
        noList: true,
        status: '',
        selected: '1',
        showMonth: false,
        monthValue: 'OneYear',
        monthType: [
          {
            label: '1个月',
            value: 'month'
          },
          {
            label: '3个月',
            value: 'lastQuarter'
          },
          {
            label: '6个月',
            value: 'halfYear'
          },
          {
            label: '1年',
            value: 'OneYear'
          }
        ],
        isFirstEnter: false
      }
    },
    created() {
      Indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      })
      this._getsortType()
      this.isFirstEnter = true
      setTimeout(function () {
        Indicator.close()
      }, 5000)
    },
    // 设置缓存从哪个页面返回
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'CheckDetail') {
        to.meta.isBack = true
      }
      next()
    },
    activated() {
      if (!this.$route.meta.isBack || this.isFirstEnter) {
        this._getsortType()
      }
      this.$route.meta.isBack = false
      this.isFirstEnter = false
    },
    methods: {
      // 种类选择
      clickClassify() {
        this.classifyShow2 = true
      },
      // 每种类别点击
      classBtn(name) {
        this.classifyName = name
        this.classifyShow2 = false
        // console.log(this.classifyName)
      },
      // 数据列表获取
      _getsortType() {
        getsortType(this.monthValue).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Indicator.close()
            this.checkData = res.data.data
            // status状态：1-工作人员  0-非工作人员
            this.status = res.data.status
          }
          if (res.code === 400) {
            Indicator.close()
            this.noList = false
          }
        })
      }
    },
    components: {
      headTop,
      'v-footer': Footer
    }
  }
</script>

<style lang="scss">
  @import '../../common/sass/mixin.scss';

  .checks {
    background-color: #fff;
    .classify {
      width: 100%;
      height: 70px;
      position: fixed;
      background: rebeccapurple;
      z-index: 9;
      /*未修改前的top数据*/
      /*top: 90px;*/
      /*修改后的top数据*/
      top: 40px;
      border-bottom: 1px solid #d9d9d9;
      .class_type {
        width: 50%;
        height: 100%;
        background: #fff;
        text-align: center;
        float: left;
        p {
          font-size: 13px;
          line-height: 30px;
          color: #292929;
        }
        .class_list {
          height: 40px;
          background: #fff;
          line-height: 40px;
          span {
            font-size: 13px;
            color: #2585d0;
          }
          img {
            width: 14px;
          }
        }
        .class_li {
          width: 120px;
          overflow: auto;
          max-height: 53vh;
          ul {
            width: 120px;
            li {
              width: 100%;
              height: 40px;
              text-align: center;
              line-height: 40px;
              background: #f2f2f2;
              @include border-bottom-1px(rgba(7, 17, 27, .1));
              font-size: 13px;
            }
          }
        }
      }
      .time_type {
        width: 50%;
        height: 100%;
        background: #fff;
        text-align: center;
        float: right;
        p {
          font-size: 13px;
          line-height: 30px;
          color: #292929;
        }
        .time_list {
          height: 40px;
          background: #fff;
          line-height: 40px;
          select {
            width: 120px;
            height: 39px;
            background: #fff;
            border: none;
            outline: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            border-radius: 0;
            color: #2585d0;
            padding: 0 20%;
            margin: 0;
            font-size: 13px;
          }
          img {
            width: 14px;
          }
        }
      }
    }
    .month_type {
      width: 100%;
      height: 60px;
      position: fixed;
      z-index: 20;
      top: 90px;
      background: red;
      .month_li {
        font-size: 13px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        @include border-bottom-1px(rgba(7, 17, 27, .1));
        span {
          float: left;
          display: block;
          margin-left: 30%;
        }
        .selectDiv {
          width: 120px;
          height: 36px;
          background: #fff;
          float: left;
          margin-top: 2px;
          .selectBox {
            outline: none;
            width: 100%;
            height: 36px;
            line-height: 36px;
            -webkit-appearance: none;
            -moz-appearance: none;
            padding-left: 42px;
            background: #fff;
            border-radius: 0;
            border-top: 1px solid #fff;
            border-bottom: 1px solid #fff;
            border-left: 1px solid #d7d7d7;
            border-right: 1px solid #d7d7d7;
          }
        }
      }
    }
    .mypopup {
      .mint-popup {
        width: 65%;
        height: 32%;
        top: 35%;
        border-radius: 5px;
      }
    }
    .check_box {
      display: flex;
      position: absolute;
      /*没有修改前的top数据*/
      /*top: 135px;*/
      /*修改后的top数据*/
      top: 80px;
      /*修改后屏蔽底部菜单栏距离*/
      /*bottom: 60px;*/
      /*width: 450px;*/
      width: 100%;
      overflow: hidden;
      /*下拉菜单*/
      .type-wrapper {
        background: #fff;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 120px;
        flex: 0 0 120px;
        width: 120px;
        position: fixed;
        min-height: 10vh;
        max-height: 55vh;
        /*未修改前的top数据*/
        /*top: 161px;*/
        /*修改后的top数据*/
        top: 111px;
        left: 0;
        bottom: 0;
        height: 100%;
        overflow: auto;
        /*兼容Safari浏览器的滑动卡顿问题*/
        -webkit-overflow-scrolling: touch;
        z-index: 9;
        .mint-navbar {
          width: 120px;
          display: inline-block;
          .mint-tab-item.is-selected {
            border-bottom: none;
            color: #26a2ff;
            margin-bottom: 0;
            background-color: #fff;
          }
          .mint-tab-item {
            @include border-bottom-1px(rgba(7, 17, 27, .1));
            background-color: #f2f2f2;
            &:last-child {
              @include border-none()
            }
          }
        }
      }
      .check-wrapper {
        /*position: absolute;*/
        background: #fff;
        /*left: 90px;*/
        top: 0;
        padding-top: 30px;
        /*width: 100%;*/
        height: 100%;
        flex: 1;
        overflow: auto;
        /*解决safari浏览器的滑动卡顿问题*/
        -webkit-overflow-scrolling: touch;
        /*z-index: 2;*/
        .mint-tab-container {
          padding-bottom: 25px;
        }
        .classify_content {
          width: 100%;
          background: #fff;
          padding-top: 10px;
          ul {
            padding: 10px;
            li {
              .content {
                /*background: #ff4444;*/
                border-bottom: 1px solid #d9d9d9;
                /*width: 100%;*/
                padding-top: 10px;
                padding-bottom: 10px;
                height: 70px;
                .li_div_left {
                  float: left;
                  display: flex;
                  width: 70px;
                  height: 70px;
                  .div_img {
                    width: 100%;
                    height: 100%;
                    background-position: center;
                    background-size: cover;
                  }
                  img {
                    width: 100%;
                  }
                }
                .li_div_right {
                  padding-left: 10px;
                  float: left;
                  h1 {
                    font-size: 15px;
                    color: #292929;
                    font-weight: normal;
                    margin-top: 5px
                  }
                  h2 {
                    font-size: 12px;
                    font-weight: normal;
                    line-height: 36px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: #545454;
                    width: 220px;
                  }
                  p {
                    font-size: 12px;
                    font-weight: normal;
                    color: #999;
                  }
                }
              }
            }
          }
        }
        .list {
          li {
            border-bottom: 1px solid #d9d9d9;
          }
          .no-data {
            /*width: 80%;*/
            text-align: center;
            color: #0b7ad9;
            font-size: 14px;
            border-bottom: none;
            img {
              padding-top: 20px;
            }
            p {
              margin-top: 5px;
            }
          }
        }
        .check-item {
          margin: 10px 10px 0 10px;
          padding-bottom: 5px;
          align-items: center;
          display: flex;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          .image {
            flex: 0 0 60px;
            width: 60px;
            height: 60px;
            margin-right: 10px;
            background: #f2f2f2;
            float: left;
            span {
              display: block;
              width: 100%;
              height: 100%;
              background-size: cover;
            }
            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
          .content {
            flex: 1;
            .titleh2 {
              margin-bottom: 10px;
              font-size: 14px;
              line-height: 20px;
              color: #393939;
              @include ellipsis(1);
              width: 70%;
            }
            .number_box {
              font-size: 12px;
              margin-bottom: 10px;
            }
            .time {
              color: #666;
            }
          }
        }
      }
    }
  }
</style>
